<?php echo $this->Html->css('admin/admin_organisations_index'); ?>
<style>
    #accounts-table tbody td {
        cursor: pointer;
    }

    #accounts-table tbody tr.selected td {
        background-color: #347892 !important;
        color: #fff;
    }

    #accounts-table tbody tr.selected td .text-muted {
        color: #eee;
    }
    
    .tag_area {
        position: relative;
        /*bottom: 0px;
        background-color: #fff;
        border-top: solid #ccc 1px;
        left: 0px;
        right: 0px;
        padding: 8px;
        font-size: 11px;
        text-align: center;*/
    }

    .tag_area .input {
        line-height: 16px;
        margin: 0px;
        padding: 2px 5px;
        width: 100%;
    }

    .tag_area .tag_remove {
        position: absolute;
        right: 0px;
        bottom: 1px;
        display: none;
        padding: 5px;
    }
</style>

<div class="" id="container">

    <div class="row">

        <div class="col-lg-12">
            
            <section class="panel m-b-none">
                <form id='accounts_list_form' action="<?php echo $this->here; ?>" method="post" >
                    <div class='panel-heading'>
                        <div class='row'>
                            <span class='col-lg-6'></span>
                            <span class='col-lg-6 text-right'>
                                <button type="button" id='add_account_btn' class='btn btn-info btn-sm'><i class='fa fa-user'></i> Add Account</button>
                            </span>
                        </div>
                    </div>

                    <div class="panel-body">

                        <div class="row p-sm">
                            <div class="col-lg-12">
                                Everyone who works with your organisation can have a different role depending on what they need to work on.
                                They must have an existing <b>Email Address</b> on their profile in order to be found and assigned a role.
                                <!--Learn more about the different roles people can have on your Page.-->
                            </div>
                        </div>

                        <div class="row p-sm" id='accounts_list'>

                            <?php $i = 0; foreach ($accounts as $account) { ?>
                                <div class="col-lg-4 m-b account_panel" data-id="<?php echo $account['OrganisationAccount']['id']; ?>">
                                    <div class='panel m-b-none' style="height: 100px;">
                                        <div class='panel-body'>
                                            <div class="col-sm-3 no-padder">
                                                <?php
                                                if (isset($account['MemberAccount']['Member']['MemberImage'][0])) {
                                                    $default = $this->Html->url('/img/avatar_default.jpg');
                                                    $url = $account['MemberAccount']['Member']['MemberImage'][0]['thumb_url'];
                                                    echo "<img src='$url' class='thumb img-thumbnail' onerror=\"this.src = '{$default}';\" />";
                                                } else {
                                                    $url = $this->Html->url('/img/avatar_default.jpg');
                                                    echo "<img src='$url' class='thumb img-thumbnail' />";
                                                }
                                                ?>
                                            </div>
                                            <div class='col-sm-9'>
                                                <div class='row'>
                                                    <div class="font-bold col-lg-12 m-b-sm">
                                                        <a href='#' class='account_remove text-default' style="position: absolute; top: 0px; right: -5px;">
                                                            <i class='fa fa-times-circle'></i>
                                                        </a>

                                                        <?php echo $account['MemberAccount']['Member']['first_name'] . ' ' . $account['MemberAccount']['Member']['last_name']; ?>
                                                        <input type='hidden' name='data[<?php echo $i; ?>][member_id]' class='member_id' value='<?php echo $account['MemberAccount']['member_id']; ?>' />
                                                        <input type='hidden' name='data[<?php echo $i; ?>][member_account_id]' class='member_account_id' value='<?php echo $account['MemberAccount']['id']; ?>' />
                                                        <input type='hidden' name='data[<?php echo $i; ?>][organisation_role_id]' class='organisation_role_id' value='<?php echo $account['OrganisationAccount']['organisation_role_id']; ?>' />
                                                        <input type="hidden" name="data[<?php echo $i; ?>][org_account_id]" value="<?php echo $account['OrganisationAccount']['id']; ?>" />
                                                    </div>

                                                </div>
                                                <div class="">
                                                    <div class="select btn-group" data-resize="auto">
                                                        <button type="button" data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle">
                                                            <span class="dropdown-label" style="width: 63px;"><?php echo $account['OrganisationRole']['name']; ?></span> 
                                                            <span class="caret"></span>
                                                        </button>
                                                        <ul class="dropdown-menu">
                                                            <?php foreach ($roles as $role) { 
                                                                $selected = $role['OrganisationRole']['id'] == $account['OrganisationAccount']['organisation_role_id'] ? 'data-selected="true"' : ''; ?>
                                                                <li <?php echo $selected; ?> data-value="<?php echo $role['OrganisationRole']['id']; ?>">
                                                                    <a href="#"><?php echo $role['OrganisationRole']['name']; ?></a>
                                                                </li>
                                                            <?php } ?>
                                                        </ul>
                                                    </div>
                                                    
                                                    <?php if( $account['OrganisationAccount']['active'] == 0 ) { ?>
                                                    <span class="text-xs text-danger">Pending Activation</span>
                                                    <?php } ?>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            <?php $i++; } ?>

                        </div>
                    </div>

                    <div class="panel-footer">
                        <div class="row">
                            <div class="col-lg-12 buttons">
                                <button type="submit" class="btn btn-success btn-sm" disabled="">Save Changes</button>
                                <button type='button' class="btn btn-white btn-sm" disabled="">Cancel</button>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </div>
    </div>
</div>

<script type='text/template' id='add_account_tmpl'>
    <div class="col-lg-4 m-b account_panel" data-id="">
        <div class='panel m-b-none' style='height: 100px;'>
            <div class='panel-body p-sm'>
                <div class="col-sm-3 no-padder">
                    <?php
                    $url = $this->Html->url('/img/avatar_default.jpg');
                    echo "<img src='$url' class='profile-thumb thumb img-thumbnail' data-default-url='$url' onerror='this.src=\"{$url}\"' id='img-thumb' />";
                    ?>
                </div>
                <div class="col-sm-9" style='position: relative;'>
                    <div class="font-bold m-b-sm">
                        <div class='tag_area'>
                            <input type='hidden' name='data[{x}][member_id]' class='member_id' value='' />
                            <input type='hidden' name='data[{x}][organisation_role_id]' class='organisation_role_id' value='' />
                            <input type='hidden' name='data[{x}][member_account_id]' class='member_account_id' value='' />
                            <input type='hidden' name='data[{x}][org_account_id]' class='org_account_id' value='' />
                                        
                            <input type="text" name="" class="form-control input-sm account_name" id="account_name" placeholder="Enter Name or Email Address" />
                            <a href="javascript:void(0);" class="tag_remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <div class="">
                        <div class="select btn-group" data-resize="auto">
                            <button type="button" data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle">
                                <span class="dropdown-label" style="width: 63px;">Select Option</span> 
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <?php foreach ($roles as $role) { ?>
                                    <li data-value="<?php echo $role['OrganisationRole']['id']; ?>">
                                    <a href="#"><?php echo $role['OrganisationRole']['name']; ?></a>
                                    </li>
                                <?php } ?>
                            </ul>
                        </div>
                    </div>
                    <span style='position: absolute; top: -3px; right: -3px;'><a class='account_remove' href='#'><i class='fa fa-times-circle'></i></a></span>
                </div>
            </div>
        </div>
    </div>
</script>

<input type='hidden' id='account_lookup_url' value='<?php echo $this->Html->url(array('action' => 'account', 'lookup')); ?>' />
<input type="hidden" id="account_profile_url" value="<?php echo $this->Html->url(array('action' => 'account_detail')); ?>" />
<input type="hidden" id="account_editor_url" value="<?php echo $this->Html->url(array('action' => 'account')); ?>" />
<input type="hidden" id="account_removal_url" value="<?php echo $this->Html->url(array('action' => 'account', 'delete')); ?>" />

<?php
echo $this->Html->script('plugins/jquery.trocar/jquery.trocar.js');
echo $this->Html->script('app/views/settings/accounts.js');
?>
